From: Sam Hewitt Date: Mon, 18 Dec 2023 15:15:28 +0000 (-0330) Subject: style: Update panel styles to use appropriately contrasty text color X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~281^2~2^2~169 X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=54a0c49d32a93393c41f881f495d78ab864fa394;p=gnome-shell.git style: Update panel styles to use appropriately contrasty text color - new always light fg color definition - update panel button style to use new fg color - fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7270 Part-of: --- diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 5a8d6525f..3b66310b7 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -5,14 +5,14 @@ $is_highcontrast:false; -// base color for light theme -$_dark_base_color: desaturate($dark_4, 100%); +$_dark_base_color: desaturate($dark_4, 100%); // dark base color that is desaturated +$_light_fg_color: $light_1; // always light (white) fg color $base_color: if($variant == 'light', $light_1, $_dark_base_color); $bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); -$fg_color: if($variant == 'light', $_dark_base_color, white); +$fg_color: if($variant == 'light', $_dark_base_color, $_light_fg_color); -$selected_fg_color: $light_1; +$selected_fg_color: $_light_fg_color; $selected_bg_color: $blue_3; $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); @@ -28,7 +28,7 @@ $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; // color definitions for OSD elements -$osd_fg_color: $light_1; +$osd_fg_color: $_light_fg_color; $osd_bg_color: lighten($_dark_base_color, 5%); // derived osd colors diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index ed087f7d8..786d3cd23 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -5,11 +5,13 @@ $is_highcontrast:true; +$_light_fg_color: $light_1; // always light (white) fg color + $base_color: if($variant == 'light', $light_1, $dark_5); $bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%)); $fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1); -$selected_fg_color: $light_1; +$selected_fg_color: $_light_fg_color; $selected_bg_color: $blue_3; $selected_borders_color: darken($selected_bg_color, 20%); @@ -25,7 +27,7 @@ $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; // color definitions for OSD elements -$osd_fg_color: $light_1; +$osd_fg_color: $_light_fg_color; $osd_bg_color: $base_color; // derived osd colors diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 7d7fcb087..eb6715e98 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -1,13 +1,15 @@ /* Top Bar */ // a.k.a. the panel -$privacy_indicator_color: $orange_3; +$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); $panel_bg_color: if($variant == 'light', $light_3, $dark_5); -$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); +$panel_fg_color: $fg_color; $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); -$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels +$transparent_panel_fg_color: $_light_fg_color; // always use brightest text for transparent panels +$system_panel_fg_color: $system_fg_color; // always use system text color for overview + $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -17,7 +19,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration height: $panel_height; @extend %numeric; transition-duration: $panel_transition_duration; - box-shadow: inset 0 -1px 0 0 $panel_border_color; + box-shadow: inset 0 -1px 0 0 $panel_border_color; // panel menus .panel-button { @@ -75,11 +77,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false); + @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $flat: false); + @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false); } // clock @@ -99,32 +101,50 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } } - // transparent panel on lock & login screens + // transparent panel on overview, lock & login screens + &:overview, &.unlock-screen, - &.login-screen, - &:overview { + &.login-screen { background-color: transparent; box-shadow: none; + // unfortunate duplication to keep indicator style in these states .panel-button { - @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color); + &.screen-recording-indicator { + @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false); + } - &#panelActivities .workspace-dot { - background-color: $panel_system_fg_color; + &.screen-sharing-indicator { + @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false); } + } + } + + // use transparent text styles for lock & login screen panels + &.unlock-screen, + &.login-screen { + .panel-button { + @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color); // clock &.clock-display { - @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock"); + @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock"); } + } + } - // unfortunate duplication so these indicators have styles - &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false); + // use system text styles for overview panel + &:overview { + .panel-button { + @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color); + + &#panelActivities .workspace-dot { + background-color: $system_panel_fg_color; } - &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $flat: false); + // clock + &.clock-display { + @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock"); } } }